<template>
  <view class="login-container">
    <view class="title">系统登录</view>
    <view class="input-group">
      <input v-model="username" placeholder="请输入用户名" class="input" />
      <input v-model="password" type="password" placeholder="请输入密码" class="input" />
    </view>
    <button class="login-btn" @click="handleLogin" :loading="isLoading">登录</button>
    <view class="tip" v-if="errorMsg">{{ errorMsg }}</view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { useStore } from '../../store' // 导入 Pinia store

// 初始化 store
const store = useStore()
// 响应式变量
const username = ref('')
const password = ref('')
const errorMsg = ref('')
const isLoading = ref(false) // 登录加载状态

// 登录方法
const handleLogin = async () => {
  // 清空错误信息
  errorMsg.value = ''
  
  // 简单验证输入
  if (!username.value.trim() || !password.value.trim()) {
    errorMsg.value = '请输入用户名和密码'
    return
  }

  try {
    isLoading.value = true // 显示加载状态
    
    // 调用登录接口（修正 uni.request 处理方式）
    const response = await uni.request({
      url: 'http://ziyan.xshhotels.cn:8981/api/Login/Login',
      method: 'POST',
      header: {
        'Content-Type': 'application/json'
      },
      data: {
        account: username.value.trim(),
        password: password.value.trim()
      }
    })

    // 处理接口响应（直接使用 response.data 获取响应体）
    if (response.errMsg !== 'request:ok') {
      throw new Error(`网络请求失败: ${response.errMsg}`)
    }

    const result = response.data
    if (result.success && result.code === 200 && result.data) {
      // 登录成功，保存token到store和本地存储
      store.loginSuccess(result.data)
      
      // 跳转逻辑
      const redirectPath = uni.getStorageSync('redirectPath') || '/pages/Home/Home'
      uni.navigateTo({ url: redirectPath })
      uni.removeStorageSync('redirectPath')
    } else {
      errorMsg.value = result.data || '登录失败，请检查账号密码'
    }
  } catch (error) {
    console.error('登录出错:', error)
    errorMsg.value = error.message || '网络错误，请稍后重试'
  } finally {
    isLoading.value = false // 关闭加载状态
  }
}
</script>

<style scoped>
.login-container {
  padding: 50rpx 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  box-sizing: border-box;
  background-color: #f5f5f5;
}
.title {
  font-size: 40rpx;
  margin-bottom: 80rpx;
  color: #333;
  margin-top: 100rpx;
}
.input-group {
  width: 100%;
  margin-bottom: 60rpx;
  background-color: white;
  padding: 30rpx;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}
.input {
  width: 100%;
  height: 80rpx;
  border: 1px solid #eee;
  border-radius: 10rpx;
  padding: 0 20rpx;
  margin-bottom: 30rpx;
  font-size: 30rpx;
  box-sizing: border-box;
}
.input:last-child {
  margin-bottom: 0;
}
.login-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background-color: #007aff;
  color: white;
  border-radius: 10rpx;
  font-size: 32rpx;
  border: none;
}
.tip {
  color: #ff3b30;
  font-size: 28rpx;
  margin-top: 30rpx;
  min-height: 32rpx;
}
</style>